<template>
  <div class="logDiv">
    <el-tabs v-model="active" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in list"
        :key="index+'_tab'"
        :label="'包裹 '+(index+1)"
        :name="index+''"
        :value="item.id+''"
      >
      <span>{{item.logistics_name}}：{{item.logistics_number}}</span>
      </el-tab-pane>
    </el-tabs>
    <el-steps direction="vertical" :active="0" style="margin-top:15px">
      <el-step
        v-for="(item, index) in traces"
        :key="index+'_step'"
        :title="item.AcceptTime"
        :description="item.AcceptStation"
      ></el-step>
    </el-steps>
  </div>
</template>

<script>
export default {
  name: "Logistics",
  props: {
    traces: {
      type: Array
    },
    list: {
      type: Array
    }
  },
  data() {
    return {
      active: "0"
    };
  },
  methods: {
    handleClick(tab) {
      this.$emit("tabchange", tab.$attrs.value);
    }
  }
};
</script>

<style>
.logDiv {
  overflow-y: auto;
  max-height: 600px;
}
.el-step__description {
  font-size: 16px;
  margin-bottom: 20px;
}
.el-step__description.is-wait {
  color: #409eff;
  font-size: 14px;
}
.el-step__title {
  font-size: 16px;
}
</style>
